<template>
    <div class="login" style="display: flex; flex-direction: column; width: 100%; height: 100%">
        <!-- 顶部 -->
        <div class="top">
            <navigator url="/pages/index/index" open-type="reLaunch" hover-class="navigator-hover">
                <img class="img img1" src="../../static/image/1.png" alt="" />
            </navigator>
            <div class="text">值得买</div>
            <navigator url="/pages/search/index" open-type="reLaunch" hover-class="navigator-hover">
                <img class="img img2" src="../../static/image//2.png" alt="" />
            </navigator>
            <img class="img img3" src="../../static/image/3.png" alt="" />
        </div>
        <div class="view" scroll-y style="flex: 1; overflow: hidden">
            <div class="img5">
                <img class="yanxuan" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
            </div>
            <button class="phone" @click="toEdit">
                <uni-icons type="phone" size="25"></uni-icons>
                手机号快捷登录
            </button>
            <button class="email">
                <uni-icons type="email" size="25"></uni-icons>
                邮箱账号登录
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const toEdit = () => {
    uni.navigateTo({
        url: '/pages/edit/index',
    });
};
</script>

<style lang="less" scoped>
.view {
    background: #f2f5f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img5 {
        width: 100%;
        margin: 140rpx 240rpx 100rpx 240rpx;
        .yanxuan {
            width: 300rpx;
            height: 100rpx;
            margin: 0 240rpx;
        }
    }
    .phone {
        background: #dd1a21;
        width: 660rpx;
        height: 104rpx;
        line-height: 104rpx;
        margin-bottom: 50rpx;
        margin-top: 50rpx;
        color: white;
        line-height: 104rpx;
    }
    .email {
        width: 660rpx;
        height: 104rpx;
        line-height: 104rpx;
        color: #dd1a21;
        line-height: 104rpx;
    }
}
.top {
    width: 100%;
    background: #eee;
    height: 112rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .text {
        font-size: 40rpx;
    }
    .img {
        height: 50rpx;
        width: 50rpx;
        margin-right: 30rpx;
    }
    .img1 {
        margin-right: 200rpx;
    }
    .img2 {
        margin-left: 140rpx;
    }
}
</style>
